<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-style: normal;
        }

        a,
        li,
        i {
            list-style: none;
            text-decoration: none;
            color: #000;
        }

        @font-face {
            font-family: 'icomoon';
            src: url('../fonts/icomoon.eot?f2xksi');
            src: url('../fonts/icomoon.eot?f2xksi#iefix') format('embedded-opentype'),
                url('../fonts/icomoon.ttf?f2xksi') format('truetype'),
                url('../fonts/icomoon.woff?f2xksi') format('woff'),
                url('../fonts/icomoon.svg?f2xksi#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }


        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            height: 64px;
        }

        nav .search {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            flex: 1;
            max-width: 500px;
            min-width: 250px;
            border-radius: 8px;
            background-color: #f1f2f3a5;
            margin: 0 20px;
        }

        .search div {
            position: relative;
            border-radius: 6px;
            width: 30px;
            height: 30px;
            margin: 0 5px;
        }

        .search div:hover {
            background-color: #d4d5d5;
        }

        .search div img {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
        }

        .search input {
            flex: 1;
            height: 30px;
            border: none;
            outline: none;
            overflow: hidden;
            margin: 0 10px;
            padding: 0 0 0 15px;
            border-radius: 6px;
            background-color: #f1f2f3;
        }

        .search input:hover {
            background-color: #ffffff;
        }

        nav ul {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        nav ul li a span {
            font-family: 'icomoon';
            font-size: 20px;
            transition: all .3s;
        }

        nav ul li a:hover span {
            /* transform: translateY(-5px); */
            animation: tiaod 0.5s;
        }

        nav ul li a {
            display: flex;
            flex-flow: column wrap;
            /* justify-content: center; */
            align-items: center;

            font-size: 13px;
            margin: 0 5px;
            padding: 0 5px;
        }

        nav ul li .login {
            height: 40px;

        }

        nav ul li .login a {
            font-size: 14px;
            line-height: 40px;
            background-color: rgba(21, 163, 229, 0.458);
            border-radius: 50%;

        }

        @keyframes tiaod {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }

            100% {
                transform: translateY(0);
            }
        }

        .nav-bag {
            position: relative;
            height: 250px;
            background: url(/pink/imgs/bg1.png) no-repeat;
            animation:bag 20s linear forwards;
        }

        .nav-bag::after {
            content: '';
            position: absolute;
            bottom: 0px;
            display: block;
            width: 200px;
            height: 100px;
            background: url(/pink/imgs/bear.png) no-repeat;
            animation:bearimg .9s steps(8) infinite,bear 5s linear forwards;
        }
        @keyframes bear {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
        @keyframes bearimg {
            0% {
              background-position: 0 0;
            }
            100% {
               background-position: -1600px 0;
            }
        }
        @keyframes bag{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -2300px 0;
            }
        }
        /* .nav-bag:hover::after{
            animation-play-state:paused;
        }
        .nav-bag:hover{
            animation-play-state:paused;
        } */
    </style>
</head>

<body>
    <div class="nav-bag">
        <nav>
            <div class="log">
                <a href=""> <img src="/pink/imgs/zyz_txt/log.png" alt=""></a>
            </div>
            <div class="search">
                <input type="text">
                <div><img src="/pink/imgs/zyz_txt/搜索小.png" alt=""></div>
            </div>

            <ul>
                <li>
                    <div class="login">
                        <a href="#">登录</a>
                    </div>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        <em>动态</em>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        <em>收藏</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span></span>
                        <em>消息</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span></span>
                        <em>历史</em>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        <em>下载</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span></span>
                        <em>设置</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span></span>
                        <em>更多内容</em>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</body>

</html>